<template>
  <div class="blogs">
    <div class="content-header">
      <h1>博客管理<small>标签管理</small></h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item >后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>博客管理</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--中间内容-->
    <div class="app-container">
		<div class="box">
			<!-- 提交分类名的界面 -->
			<el-form :model="formData" :rules="userRules" ref="userForm" label-width="100px">
			  <el-row>
				<el-col :span="8">
				  <el-form-item prop="tag" label="标签名">
					<el-input v-model.trim="formData.tag"></el-input>
				  </el-form-item>
				</el-col>
				<el-button style="margin-left: 100px;" type="primary" @click="submitForm('ruleForm')">添加</el-button>
			  </el-row>
			</el-form>
			<!-- 显示分类名界面 -->
			<el-table
				:data="tableData"
				style="width: 80%">
				<el-table-column
				  label="序号"
				  type="index">
				</el-table-column>
				<el-table-column
				  label="标签名字"
				  prop="tag"
				  align="center">
				</el-table-column>
				<el-table-column
				  label="文章数量"
				  prop="tag_number"
				  align="center">
				</el-table-column>
				<el-table-column
				  align="right">
				  <template slot-scope="scope">
					<el-button
					  size="mini"
					  type="danger"
					  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				  </template>
				</el-table-column>
			</el-table>
			<!-- 实现分页的样式 -->
			<el-pagination
			  background
			  layout="prev, pager, next"
			  :page-size="Pagesize"
			  :total="total"
			  @current-change="page">
			</el-pagination>
		</div>
    </div>
    <br>
    <br>
  </div>
</template>

<script>
	export default {
	  data () {
		return {
			formData:{
				tag:'',
				tag_number: null
			},
		    userRules: {
			// 验证标签名是否合法
			tag: [
			  { required: true, message: '请输入新的分类名', trigger: 'blur' },
			  { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
			]
		    },
			tableData: [{
			    tag:"计算机"
			}],
			Pagesize:5,
			total:20,
			//删除后用于进行界面刷新！！！！
			currentPage:1
		}
	  },
	  created () {
		var that=this
		//初始化加载第一页的数据  120.26.196.115  localhost
		axios.get("http://"+that.$store.state.host+":8181/tag/fondTag/"+1+"/"+that.Pagesize).then(function(res){
			// console.log(res.data)
			that.tableData=res.data.map.data.content
			that.total=res.data.map.data.totalElements
		})
	  },
	  methods: {
		//实现提交标签名字
		submitForm (formName) {
		  // 进行表单校验
		  var that=this
		  this.$refs.userForm.validate((valid) => {
			if (valid) {
			    //保存标签名字前,判断用户是否有权限
			    var user=JSON.parse(sessionStorage.getItem("user_info"))
			    if(user.power==2){
					axios.post("http://"+that.$store.state.host+":8181/tag/addTag/"+that.formData.tag).then(function(res){
						if(res.data.status==true){
							//手动置空！！！！ 真烦人
							that.formData.tag=""
							that.$message.success('提交成功!')
							//提交成功后，进行界面的刷新
							that.page(that.currentPage)
						}else{
							that.$message.error(res.data.message);
						}
					})
			    }else{
				    that.$message.warning('你不具有该权限!');
			    }
			} else { // 校验不通过
			  this.$message.error('校验失败，请检查输入格式!')
			  return false
			}
		  })
		},
		page(currentPage){
			var that=this
			//为了删除后用于界面刷新，所以保存一下！！！
			that.currentPage=currentPage
			// console.log(currentPage)
			//初始化加载第一页的数据  120.26.196.115  localhost
			axios.get("http://"+that.$store.state.host+":8181/tag/fondTag/"+currentPage+"/"+that.Pagesize).then(function(res){
			// console.log(res.data)
				that.tableData=res.data.map.data.content
				that.total=res.data.map.data.totalElements
			})
		},
		handleDelete(index, row){
			var that=this
			var user=JSON.parse(sessionStorage.getItem("user_info"))
			if(user.power==2){
				//进行删除操作前的再次询问！！！
				this.$confirm('此操作将永久删除 '+row.tag+' , 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					//用户点击了确认删除
				    // console.log("确认")
					//120.26.196.115  localhost
					axios.delete("http://"+that.$store.state.host+":8181/tag/deleteTagById/"+row.tag).then(function(res){
						//刷新当前界面
						that.page(that.currentPage);
						that.$message.success(res.data.message);
					}) 
				}).catch(() => {
					//用户点击了取消 
					// console.log("取消")	   
				});
			}else{
				that.$message.warning('你不具有该权限!');
			}
		}
	  }
	}
</script>

<style>
</style>
